<!DOCTYPE html>
<html>
<head>
    <include file="./public/sty.html"/>
    <style>
        .yz1,.yz2{text-align: left !important; margin-left: 20px;}
        .yz1 :before,.yz2 :before{ font-family: iconfont;
            font-style: inherit;
            padding: 0 5px;
            font-size: 14px;content: "\E60D";}
        .nbc{background:#2e4158; color:#fff;}
    </style>
</head>
<body>
<div id="app" class="setMobile">
    <include file="./public/header.html"/>

    <div class="container notSign fix pt15" s="[object Object]">
        <div class="userMain mgb10">
            <ul class="queue">
                <li class="now"><span>绑定新手机</span><i></i></li>
                <li><span>完成</span><i></i></li>
            </ul>
            <form action="{:U('Users/setMobile')}" method="get" id="form">
                <input type="hidden" name="id" id="uid" value="{$id}">
            <ul class="submitContent mglr30 mgt15">
                <li><span>手机号：</span> <input tag="手机号" name="mobile" id="mobile" placeholder="请输入您要绑定的手机号码" type="text" class="userInput"> <span class="yz1" style="width: 300px"></span> <!---->
                </li>
                <li style="position: relative;"><span>验证码：</span>
                    <input tag="验证码" placeholder="输入验证码" name="yzm" id="yzm" type="text" class="userInput"><span class="yz2" style="width: 300px"></span>  <!---->
                    <span class="btn SendCode"><a class="ClickShade nbc nbc2"  onclick="examine()">发送验证码</a></span>
                    <!--<span class="btn SendCode"><a class="ClickShade" onclick="examine(e)">发送验证码</a></span>-->
                </li>
                <li><span></span> <a class="submitBtn ClickShade" onclick="sav()">确定</a></li>
            </ul>
           </form>
        </div>
    </div>
    <div id="tishi1" class="layermbox layermbox0 layermshow" index="11">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">·发送成功，请注意查收·</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <div id="tishi2" class="layermbox layermbox0 layermshow" index="11">
        <div class="laymshade"></div>
        <div class="layermmain">
            <div class="section">
                <div class="layermchild layerConfirm layermanim"><h3 style="">温馨提示</h3>
                    <button class="layermend"></button>
                    <div class="layermcont">·发送失败·</div>
                    <div class="layermbtn"><span type="1">确定</span></div>
                </div>
            </div>
        </div>
    </div>
    <include file="./public/footer.html"/>
</div>


<script src="/style/js/jquery.min.js"></script>
<script src="/style/js/fx.js"></script>
<script>
    $(function(){
        personalInfo();
    })
</script>


</body>
</html>

<script>

    function sav(){
        var id = $("#uid").val();
        var mobile = $("#mobile").val();
        var yzm = $("#yzm").val();
        if(mobile == ''){
            $(".yz1").html("<font color='red'>手机号不能为空</font>");
            return false;
        }else {
            $(".yz1").html("");
        }
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))){
            $(".yz1").html("<font color='red'>手机号码格式有误，请重填!</font>");
            return false;
        }


        if(yzm == ''){
            $(".yz2").html("<font color='red'>验证码不能为空</font>");
            return false;
        }else {
            $(".yz2").html("");
        }
        $.ajax({
            type: "POST",
            url: "{:U('Users/setMobile')}",
            data: {'yzm':yzm,'mobile':mobile,'id':id},
            success: function(dat){
                if(dat==1){
                    window.location.href="{:U('Users/personalInfo')}";
                }else{
                    $(".yz2").html("<font color='red'>验证码错误，请重新输入</font>");
                }
            }
        });
    }



    function examine(){
        var mobile = $("#mobile").val();
        if(mobile == ''){
            $(".yz1").html("<font color='red'>手机号不能为空</font>");
            return false;
        }else {
            $(".yz1").html("");
        }

        $.ajax({
            type:"post",
            url:"{:U('Users/examine_message')}",
            data:{'mobile':mobile},
            dataType:"json",
            success:function(msg){
               if(msg==1){
//                   alert("发送成功，请注意查收");
                   $('#tishi1').show();
                   var t = 60;
                   $(".nbc2").html(t+" s");
                   var timer = setInterval(function(){
                       t--;
                       $(".nbc2").html(t+" s");
                       if(t <= 0){
                           clearInterval(timer);
                           $(".nbc2").addClass("nbc");
                           $(".nbc2").html("发送验证码");
                       }
                   },1000);
                   $(".nbc2").removeClass("nbc");
               }else{
//                   alert("发送失败");
                   $('#tishi2').show();
               }
            }
        })
    }
</script>